<template>
	<div class="detailcent">
<div class="top">
	<p class="biao">标准门票</p>
		<div class="cai">
			<van-sticky :offset-top="0">
				<van-tabs>
					<van-tab title="1日票"></van-tab>
					<div class="qing">
						<van-tab title="1.5日票">
						</van-tab>
					</div>
					<van-tab title="2日联票"></van-tab>
					<van-tab title="大学生票"></van-tab>
				</van-tabs>
			</van-sticky>
		</div>
</div>
<div class="bottom">
	<div class="cheng" v-for="(item,index) in arr" :key="index" @click="gofu(item)" :text="item.text" :tex11="item.text11" >
<p class="piao">{{ item.text }}</p>
<p class="sui">{{ item.text1}}</p>
<div class="tiao">
<span>{{ item.text2 }}</span>
<span> {{ item.text3 }}</span>
<span>{{ item.text4 }}</span>
</div>
<div class="guan">
	<img :src="item.img" alt="">
	<span>{{ item.text5 }}</span>
	<span>{{ item.text6 }}</span>
</div>
<div class="yue">
	<span>{{ item.text7 }}</span>
	<span>{{ item.text8 }}&nbsp;></span>
	<span>{{ item.text9 }}</span>
	<span>{{ item.text10 }}</span>
</div>
<div class="ding">
	<span>¥</span>
	<span>{{ item.text11 }}</span>
	<span>起</span>
	<span>订</span>
	<span>{{ item.text12 }}</span>
	
</div>
	</div>

</div>
	</div>
</template>

<script>
export default {
	data() {
		return {
			arr: [
				// { img: "https://img.alicdn.com/tfs/TB1mtk.1QL0gK0jSZFAXXcA9pXa-144-56.png", text: "成人票", text1: "12周岁(含)至64周岁(含)", text2: "条件退", text3: "无须换票", text4: "平均1分钟出票", text5: "可订今日", text6: "可领优惠券", text7: "月售1.1万+", text8: "预订须知", text9: "飞猪优惠: 1张券", text10: "共优惠¥25.8", text11: "520.8", text12: "¥528" },
				// { img: "https://img.alicdn.com/tfs/TB1mtk.1QL0gK0jSZFAXXcA9pXa-144-56.png", text: "儿童票", text1: "3周岁(含)至11周岁(含)", text2: "条件退",  text4: "平均1分钟出票", text5: "可订今日", text7: "月售4000+", text8: "预订须知",  text11: "385",  },
				// { img: "https://img.alicdn.com/tfs/TB1mtk.1QL0gK0jSZFAXXcA9pXa-144-56.png", text: "老人票", text1: "65周岁及以上", text2: "条件退", text3: "可领优惠券", text4: "平均1分钟出票", text5: "可订今日", text6: "可领优惠券", text7: "月售200+", text8: "预订须知", text9: "飞猪优惠: 1张券", text10: "共优惠¥23", text11: "372", text12: "¥395" },
			]
		}
	},
	methods: {
		gofu(item) { 
			sessionStorage.setItem('detailcent', JSON.stringify(item))
			this.$router.push({
				path: "/ding",
				query: {
					detailcent:JSON.stringify(item)
				}
				
			}).catch(err => { })
		}
		// gofu() {
		// 	this.$router.push('/ding').catch(err => { })
		// }
	},
	async created() {
		this.$http({
			url: '  http://localhost:3000/sypiao',
			method: "get"
		}).then(res => {
			this.arr = res.data
		})
	}
}
</script>

<style scoped>
.detailcent{
	width: 7.02rem;
		height: 10.8rem;
		margin-left: .24rem;
	margin-top: .23rem;
	background-color: white;
	border-radius: .15rem;
	overflow: hidden;
}
.cai {
	width: 7rem;
	margin-left: -0.4rem;
	margin-top: .2rem;
	line-height: 1rem;
	border-bottom: 1px solid transparent;
	/* background-color: aquamarine; */
}

::v-deep .van-sticky {
	width: 6rem;
	margin-left: .18rem;
}

/* van-tab  */
::v-deep .van-tab--active {
	height: .6rem;
	border: 1px solid rgba(202, 200, 200, 0.384);
	border-radius: .6rem;
		background: #ffe033;
	margin-left: .2rem;
}

::v-deep .van-tabs__line {
	display: none;
}

/*  van-tabs__nav van-tabs__nav--line  */
::v-deep .van-tab {
	margin-top: 5px;
	margin-bottom: 5px;
	/* margin-right: -.1rem; */
}

::v-deep .van-tabs__nav { 
	margin-left: .21rem;
	/* 整个背景 最大的盒子*/
	/* background-color: #f0e0d932; */
}
.biao{
	margin-top: .3rem;
	margin-left: .2rem;
	font-size: 18px;
}
.bottom{
	width: 6.42rem;
	height: auto;
	background-color: #f7f8fa;
	margin-left: .22rem;
	overflow: hidden;
}
.cheng{
	height: 2.68rem;
	margin-left: .15rem;
}
.piao{
	margin-top: .3rem;
	font-size: 16px;
	margin-bottom: .15rem;
}
.sui{
			color: #5c5f66;
			margin-bottom: .05rem;
}
.tiao{
		margin-bottom: .12rem;
}
.tiao :nth-child(1){
	color: green;
	margin-right: .1rem;
}
.tiao :nth-child(2) {
			color: rgb(92, 95, 102);
				margin-right: .1rem;
}
.tiao :nth-child(3) {
			color: rgb(92, 95, 102);
}
.guan{
		margin-bottom: .2rem;
}
.guan img{
	width: .75rem;
	height: .36rem;
	margin-right: 5px;
}
.guan :nth-child(2){
		color: rgb(255, 115, 0);
		margin-right: .1rem;
		border-radius: .05rem;
		padding: 0 3px ;
		border: 1px solid rgb(255, 115, 0);
}
.guan :nth-child(3){
		margin-right: .1rem;
		color: rgb(255, 64, 26);
			border-radius: .05rem;
				padding: 0 3px;
				border: 1px solid rgb(255, 64, 26);
}
.yue :nth-child(1){
	color: #919499;
	margin-right: .1rem;
}
.yue :nth-child(2){
color: #00a2ff;
	margin-right: .6rem;
}
.yue :nth-child(3){
color: red;
			background-image: linear-gradient(90deg, #fff2eb9a, #ff401aa4);
}
.yue :nth-child(4){
color: white;
border-radius: 5px 0 0 0;
background-image: linear-gradient(90deg, #ff846b, #ff401a);
}
.ding{
	position: relative;
	left: 4rem;
	bottom: 1rem;
}
.ding :nth-child(1){
	color: #ff5000;
	font-size: 14px;
	margin-left: -.2rem;
}
.ding :nth-child(2){
	color: #ff5000;
	font-size: 20px;
	margin-right: .05rem;
}
.ding :nth-child(3){
			color: #919499;
			margin-right: 10px;
}
.ding :nth-child(4){
	display: block;
		width: .84rem;
		height: .84rem;
		text-align: center;
		line-height: .84rem;
		font-weight: 700;
		background-color: #ff7300;
		color: white;
		font-size: 20px;
		margin-left: 1.3rem;
		margin-top: -.68rem;
		border-radius: .15rem;
}
.ding :nth-child(5) {
			color: #919499;
			position: relative;
			top: -.2rem;
			left: .6rem;
}
</style>